<template>
  <div>
    <web-header show="domestic" />

    <div class="right-nav">
      <img src="https://admin.hqx.com.cn/Public/Travel/images/topic/sale/Rnav-01.png" />
      <ul id="nav_a">
        <!-- <h3>特价专区</h3> -->
        <li><a href="#area_1" class="">国内热销</a></li>
        <li><a href="#area_2" class="">国内特价</a></li>
        <li><a href="#area_3">浪漫海滩</a></li>
        <li><a href="#area_4">广东周边</a></li>
      </ul>
    </div>

    <div class="special-top">
      <div class="banner-nav">
        <h3>
          <router-link target="_blank" :to="`/line/79`"> 西南 </router-link>
        </h3>
        <ul>
          <li v-for="(rs, index) in lineDomestic['西南']" :key="index">
            <router-link target="_blank" :to="`/line/${rs.id}`">
              {{ rs.title }}
            </router-link>
          </li>
          <li>
            <router-link target="_blank" to="/line/305">
              大理
            </router-link>
          </li>
          <li>
            <router-link target="_blank" to="/line/306">
              昆明
            </router-link>
          </li>
          <li>
            <router-link target="_blank" to="/line/442">
              西双版纳
            </router-link>
          </li>
        </ul>
        <h3>
          <router-link target="_blank" :to="`/line/80`"> 西北 </router-link>
        </h3>
        <ul>
          <li v-for="(rs, index) in lineDomestic['西北']" :key="index">
            <router-link target="_blank" :to="`/line/${rs.id}`">
              {{ rs.title }}
            </router-link>
          </li>
          <li>
            <router-link target="_blank" to="/line/173">
              西安
            </router-link>
          </li>
          <li>
            <router-link target="_blank" to="/line/447">
              敦煌
            </router-link>
          </li>
          <li>
            <router-link target="_blank" to="/line/416">
              乌鲁木齐
            </router-link>
          </li>
        </ul>
        <h3>
          <router-link target="_blank" :to="`/line/194`"> 华北 </router-link>
        </h3>
        <ul>
          <li v-for="(rs, index) in lineDomestic['华北']" :key="index">
            <router-link target="_blank" :to="`/line/${rs.id}`">
              {{ rs.title }}
            </router-link>
          </li>
          <li>
            <router-link target="_blank" to="/line/386">
              天安门
            </router-link>
          </li>
        </ul>
        <h3>
          <router-link target="_blank" :to="`/line/81`"> 东北 </router-link>
        </h3>
        <ul>
          <li v-for="(rs, index) in lineDomestic['东北']" :key="index">
            <router-link target="_blank" :to="`/line/${rs.id}`">
              {{ rs.title }}
            </router-link>
          </li>
          <li>
            <router-link target="_blank" to="/line/309">
              哈尔滨
            </router-link>
          </li>
        </ul>
        <h3>
          <router-link target="_blank" :to="`/line/81`"> 华中 </router-link>
        </h3>
        <ul>
          <li v-for="(rs, index) in lineDomestic['华中']" :key="index">
            <router-link target="_blank" :to="`/line/${rs.id}`">
              {{ rs.title }}
            </router-link>
          </li>
          <li>
            <router-link target="_blank" to="/line/153">
              张家界
            </router-link>
          </li>
        </ul>
      </div>
      <!-- 轮播图 -->
      <div id="banner_tabs" class="flexslider" style="background: pink">
        <my-banner :list="bannerList"></my-banner>
      </div>
      <!-- <div id="banner_tabs" class="flexslider">
                <ul class="slides">
                    <li> <router-link  target="_blank" to="#"> 
                        <img src="https://admin.hqx.com.cn/Public/Travel/images/sale/gn1.jpg"> </router-link>
                    </li>
                    <li> <router-link  target="_blank" to="#"> 
                        <img src="https://admin.hqx.com.cn/Public/Travel/images/sale/gn2.jpg"> </router-link>
                    </li>
                    <li> <router-link  target="_blank" to="#"> 
                        <img src="https://admin.hqx.com.cn/Public/Travel/images/sale/gn3.jpg"> </router-link>
                    </li>
                </ul>
                <ol id="bannerCtrl" class="flex-control-nav flex-control-paging">
                    <li class="active">
                        <router-link  >1</router-link></li>
                    <li><router-link  >2</router-link></li>
                    <li><router-link  >3</router-link></li>
                </ol>
            </div> -->

      <div class="banner-right">
        <ul>
          <li>
            <img src="https://admin.hqx.com.cn/Public/Travel/images/sale/special-icon1.png" /><span>严格优选</span>
          </li>
          <li>
            <img src="https://admin.hqx.com.cn/Public/Travel/images/sale/special-icon2.png" /><span>品质线路</span>
          </li>
          <li>
            <img src="https://admin.hqx.com.cn/Public/Travel/images/sale/special-icon3.png" /><span>特色实惠</span>
          </li>
          <li>
            <img src="https://admin.hqx.com.cn/Public/Travel/images/sale/special-icon4.png" /><span>只做经典</span>
          </li>
        </ul>
        <div class="good"><span>满意度：99%</span><span>好评数：258</span></div>
        <hr />
        <h4>用户真实点评</h4>
        <div class="tab">
          <router-link to="">春游</router-link>
          <router-link to="">海岛游</router-link>
        </div>
        <p>
          周边游/国内长途/境外游，产品多多，精彩活动不停!旅游，更多打折门票，特价线路，4折起!
        </p>
      </div>
    </div>

    <div class="main1" id="area_1">
      <div class="warrp1">
        <div class="tittle1">
          <div class="tittle-left">
            <h2>
              <img src="https://admin.hqx.com.cn/Public/App/image/title-logo (3).png" />国内品质旅游
            </h2>
            <p>精心策划，优质服务，带您体验无与伦比的旅行享受</p>
          </div>
          <div class="tittle-right">
            <router-link target="_blank" to="/line/79">云南</router-link>
            <router-link target="_blank" to="/line/164">成都</router-link>
            <router-link target="_blank" to="/line/166">重庆</router-link>
            <router-link target="_blank" to="/line/385">北京</router-link>
            <router-link target="_blank" to="/line/172">新疆</router-link>
            <router-link target="_blank" to="/line/245">内蒙</router-link>
            <router-link target="_blank" to="/line/81">辽宁</router-link>
          </div>
        </div>
        <div class="box1">
          <div class="box1-f">
            <router-link class="container1" :to="`/details/${quality[0]?.id}`" target="_blank"
              style="margin-bottom: 15px">
              <img :src="quality[0]?.picture" />
              <div class="a-shadow">
                <h4 class="clamp-line-1">{{ quality[0]?.title }}</h4>
                <h5>
                  ￥<span>{{ quality[0]?.price }}</span>起
                </h5>
              </div>
              <div class="theme-tip">{{ quality[0]?.themeArray[0]?.title }}</div>
            </router-link>
            <router-link class="container2" :to="`/details/${quality[1]?.id}`" target="_blank">
              <img :src="quality[1]?.picture" />
              <h4 style="width: 200px" class="clamp-line-2 clamp">
                {{ quality[1]?.title }}
              </h4>
              <!-- <p>
                出发城市：<span>{{ quality[1]?.cityArray[0].title }} </span>
                
              </p> -->
              <h5>
                ￥<span>{{ quality[1]?.price }}</span>起
              </h5>
              <div class="theme-tip">{{ quality[1]?.themeArray[0]?.title }}</div>

            </router-link>
          </div>
          <div class="box1-f" style="padding: 0 15px">
            <router-link target="_blank" class="container2" :to="`/details/${quality[2]?.id}`">
              <img :src="quality[2]?.picture || quality[2]?.pic" />
              <h4 class="clamp-line-2 clamp">{{ quality[2]?.title }}</h4>
              <!-- <p>
                出发城市：<span>{{ quality[2]?.cityArray[0].title }}</span>
              </p> -->
              <h5>
                ￥<span>{{ quality[2]?.price }}</span>起
              </h5>
              <div class="theme-tip">{{ quality[2]?.themeArray[0]?.title }}</div>
            </router-link>
            <router-link target="_blank" class="container2" :to="`/details/${quality[3]?.id}`">
              <img :src="quality[3]?.picture" />
              <h4 class="clamp-line-2 clamp">{{ quality[3]?.title }}</h4>
              <!-- <p>
                出发城市：<span>{{ quality[3]?.cityArray[0].title }}</span>
              </p> -->
              <h5>
                ￥<span>{{ quality[3]?.price }}</span>起
              </h5>
              <div class="theme-tip">{{ quality[3]?.themeArray[0]?.title }}</div>
            </router-link>
            <router-link target="_blank" class="container2" :to="`/details/${quality[4]?.id}`">
              <img :src="quality[4]?.picture" />
              <h4 class="clamp-line-2 clamp">{{ quality[4]?.title }}</h4>
              <!-- <p>
                出发城市：<span>{{ quality[4]?.cityArray[0].title }}</span>
              </p> -->
              <h5>
                ￥<span>{{ quality[4]?.price }}</span>起
              </h5>
              <div class="theme-tip">{{ quality[4]?.themeArray[0]?.title }}</div>
            </router-link>
          </div>
          <div class="box1-f">
            <router-link target="_blank" class="container2" :to="`/details/${quality[5]?.id}`">
              <img :src="quality[5]?.picture || quality[5]?.pic" />
              <h4 class="clamp-line-2 clamp">{{ quality[5]?.title }}</h4>
              <!-- <p>
                出发城市：<span>{{ quality[5]?.cityArray[0].title }}</span>
              </p> -->
              <h5>
                ￥<span>{{ quality[5]?.price }}</span>起
              </h5>
              <div class="theme-tip">{{ quality[5]?.themeArray[0]?.title }}</div>
            </router-link>
            <router-link target="_blank" class="container1" :to="`/details/${quality[6]?.id}`">
              <img :src="quality[6]?.picture || quality[6]?.pic" />
              <div class="a-shadow">
                <h4 class="clamp-line-1">{{ quality[6]?.title }}</h4>
                <h5>
                  ￥<span>{{ quality[6]?.price }}</span>起
                </h5>
              </div>
              <div class="theme-tip">{{ quality[6]?.themeArray[0]?.title }}</div>
            </router-link>
          </div>
        </div>
      </div>
    </div>
    <div class="main2" id="area_2">
      <div class="warrp2">
        <div class="tittle1">
          <div class="tittle-left">
            <h2>
              <img src="https://admin.hqx.com.cn/Public/App/image/title-logo (4).png" />国内特价线路
            </h2>
            <p>超值优惠，畅游中国，尽享高性价比的旅行体验</p>
          </div>
          <div class="tittle-right">
            <router-link target="_blank" to="/line/114">上海</router-link>
            <router-link target="_blank" to="/line/321">江苏</router-link>
            <router-link target="_blank" to="/line/174">山东</router-link>
            <router-link target="_blank" to="/line/72">香港</router-link>
            <router-link target="_blank" to="/line/73">澳门</router-link>
            <router-link target="_blank" to="/line/78">湖南</router-link>
            <router-link target="_blank" to="/line/356">湖北</router-link>
          </div>
        </div>
        <div class="box1">
          <ul class="box-left">
            <li v-for="rs in special" :key="rs.id" style="width: 295px">
              <router-link target="_blank" :to="`/details/${rs.id}`">
                <img :src="rs.picture" /></router-link>
              <h3 class="clamp-line-1">{{ rs.title }}</h3>
              <p>
                <span>￥{{ rs.price }}元/人起</span>
              </p>
              <div v-if="rs.themeArray[0]" class="theme-tip-radius">{{ rs.themeArray[0].title }}</div>
            </li>
          </ul>
          <div class="box-nav" style="padding: 20px 0 18px 20px">
            <h3>
              <router-link target="_blank" :to="`/line/75`"> 华东 </router-link>
            </h3>
            <ul>
              <li v-for="(rs, index) in lineDomestic['华东']" :key="index">
                <router-link target="_blank" :to="`/line/${rs.id}`">
                  {{ rs.title }}
                </router-link>
              </li>
              <li>
                <router-link target="_blank" to="/line/113">
                  黄山
                </router-link>
              </li>
              <li>
                <router-link target="_blank" to="/line/119">
                  乌镇
                </router-link>
              </li>
            </ul>
            <h3>
              <router-link target="_blank" :to="`/line/77`"> 华南 </router-link>
            </h3>
            <ul>
              <li v-for="(rs, index) in lineDomestic['华南']" :key="index">
                <router-link target="_blank" :to="`/line/${rs.id}`">
                  {{ rs.title }}
                </router-link>
              </li>
              <li>
                <router-link target="_blank" to="/line/143">
                  深圳
                </router-link>
              </li>
            </ul>

            <h3>
              <router-link target="_blank" :to="`/line/385`">
                北京
              </router-link>
            </h3>
            <ul>
              <li>
                <router-link target="_blank" to="/line/392">
                  恭王府
                </router-link>
              </li>
              <!-- <li>
                <router-link target="_blank" to="/line/393">
                  南锣鼓巷
                </router-link>
              </li> -->
              <li>
                <router-link target="_blank" to="/line/390">
                  颐和园
                </router-link>
              </li>
              <li>
                <router-link target="_blank" to="/line/388"> 天坛 </router-link>
              </li>
              <li>
                <router-link target="_blank" to="/line/389">
                  圆明园
                </router-link>
              </li>
              <li>
                <router-link target="_blank" to="/line/385"> 故宫 </router-link>
              </li>
              <li>
                <router-link target="_blank" to="/line/387"> 长城 </router-link>
              </li>
            </ul>
            <h3>
              <router-link target="_blank" :to="`/line/78`"> 湖北 </router-link>
            </h3>
            <ul>
              <li>
                <router-link target="_blank" to="/line/154">
                  恩施
                </router-link>
              </li>
              <li>
                <router-link target="_blank" to="/line/156">
                  武汉
                </router-link>
              </li>
              <li>
                <router-link target="_blank" to="/line/432">
                  武当山
                </router-link>
              </li>
              <li>
                <router-link target="_blank" to="/line/431">
                  神农架
                </router-link>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
    <div class="main2" id="area_3">
      <div class="warrp2">
        <div class="tittle1">
          <div class="tittle-left">
            <h2>
              <img src="https://admin.hqx.com.cn/Public/App/image/title-logo (2).png" />国内精选目的地
            </h2>
            <p>探索中国之美，发现你的下一个旅行目的地</p>
          </div>
          <div class="tittle-right">
            <router-link target="_blank" to="/line/309">哈尔滨</router-link>
            <router-link target="_blank" to="/line/452">雪乡</router-link>
            <router-link target="_blank" to="/line/169">丽江</router-link>
            <router-link target="_blank" to="/line/444">大理</router-link>
            <router-link target="_blank" to="/line/127">三亚</router-link>
            <router-link target="_blank" to="/line/153">张家界</router-link>
          </div>
        </div>
        <div class="box1">
          <div class="box-nav" style="min-height: 526px">
            <h3>
              <router-link target="_blank" :to="`/line/76`"> 海南 </router-link>
            </h3>
            <ul>
              <template v-for="(rs, index) in desItem['海南']" :key="rs.id">
                <li v-if="index < 6">
                  <router-link target="_blank" :to="`/line/${rs.id}`">{{
                    rs.title
                  }}</router-link>
                </li>
              </template>
            </ul>
            <h3>
              <router-link target="_blank" :to="`/line/79`">
                云贵渝
              </router-link>
            </h3>
            <ul>
              <template v-for="(rs, index) in desItem['云贵渝2']" :key="rs.id">
                <li>
                  <router-link target="_blank" :to="`/line/${rs.id}`">{{
                    rs.title
                  }}</router-link>
                </li>
              </template>
            </ul>
            <h3>
              <router-link target="_blank" :to="`/line/376`">
                东北
              </router-link>
            </h3>
            <ul>
              <li>
                <router-link target="_blank" to="/line/303"> 大连 </router-link>
              </li>
              <li>
                <router-link target="_blank" to="/line/304"> 吉林 </router-link>
              </li>
              <li>
                <router-link target="_blank" to="/line/308"> 沈阳 </router-link>
              </li>
              <li>
                <router-link target="_blank" to="/line/309">
                  哈尔滨
                </router-link>
              </li>
              <li>
                <router-link target="_blank" to="/line/450"> 漠河 </router-link>
              </li>
              <li>
                <router-link target="_blank" to="/line/451">
                  五大连池
                </router-link>
              </li>
              <li>
                <router-link target="_blank" to="/line/376">
                  黑龙江
                </router-link>
              </li>
              <li>
                <router-link target="_blank" to="/line/452"> 雪乡 </router-link>
              </li>
              <li>
                <router-link target="_blank" to="/line/515">
                  长白山
                </router-link>
              </li>
            </ul>
            <h3>湖南</h3>
            <ul>
              <li>
                <router-link target="_blank" to="/line/153">
                  张家界
                </router-link>
              </li>
              <li>
                <router-link target="_blank" to="/line/155"> 长沙 </router-link>
              </li>
              <li>
                <router-link target="_blank" to="/line/159">
                  凤凰古城
                </router-link>
              </li>
            </ul>
          </div>
          <ul class="box-left" style="margin: 0 -20px 0 20px">
            <li v-for="rs in beach" :key="rs.id" style="width: 290px">
              <router-link target="_blank" :to="`/details/${rs.id}`">
                <img :src="rs.picture" style="width: 290px" />
              </router-link>
              <h3 class="clamp-line-1">{{ rs.title }}</h3>
              <p>
                <span>￥{{ rs.price }}元/人起</span>
              </p>
              <div v-if="rs.themeArray[0]" class="theme-tip-radius">{{ rs.themeArray[0].title }}</div>
            </li>
          </ul>
        </div>
      </div>
    </div>

    <div class="theme_box1" id="area_4">
      <div class="theme_box">
        <!-- <div class="top">
          <dl>
            <dt style="font-size: 30px; font-weight: 400">广东周边风情体验</dt>
            <dd>团队活动周边游，休闲娱乐 亲近自然 放松体验...</dd>
          </dl>
        </div> -->
        <div class="tittle-left">
          <h2>
            <img src="https://admin.hqx.com.cn/Public/App/image/title-logo (5).png" />国内特价线路
          </h2>
          <p>超值优惠，畅游中国，尽享高性价比的旅行体验</p>
        </div>
        <div class="bottom">
          <div class="list">
            <section v-for="rs in sideLine" :key="rs.id">
              <div class="picture">
                <router-link target="_blank" :to="`/details/${rs.id}`"><img :src="rs.picture"
                    style="width: 280px" /></router-link>
              </div>
              <div class="info">
                <h3>
                  <router-link target="_blank" :to="`/details/${rs.id}`" class="clamp-line-2">{{
                    rs.title
                  }}</router-link>
                </h3>
                <div>
                  <strong>￥{{ rs.price }}</strong>元/人起
                </div>
              </div>

              <div class="post-ab">{{ rs.themeArray[0].title }}</div>
            </section>
          </div>
        </div>
      </div>
    </div>
    <web-footer />
    <back-top />
  </div>
</template>

<script setup>
import { ref, onMounted, computed } from "vue";
import {
  index_banner,
  line_items,
  theme_items,
  destination_area,
} from "@/api/travel";
import myBanner from "@/components/swiper/myBanner.vue";
import lineDomestic from "@/assets/dictionaries/lineAreasDomestic.js";

// 全国线路区域
let destination = ref([]);
let desItem = ref({});

// 获取区域
let getDestination = async () => {
  let res = await destination_area();
  destination.value = res.data;
  res.data.forEach((item) => {
    desItem.value[item.title] = item.areas;
  });
  desItem.value['云贵渝2'] = [
    {
      "id": 79,
      "title": "云南",
    },
    {
      "id": 164,
      "title": "成都",
    },
    {
      "id": 306,
      "title": "昆明",
    },
    {
      "id": 166,
      "title": "重庆",
    },
    {
      "id": 169,
      "title": "丽江",
    },
    {
      "id": 305,
      "title": "大理",
    },
    {
      "id": 214,
      "title": "贵州",
    },
    {
      "id": 472,
      "title": "腾冲",
    },
    {
      "id": 442,
      "title": "西双版纳",
    },
    // {
    //     "id": 411,
    //     "title": "武隆",
    // },
    // {
    //     "id": 412,
    //     "title": "长江索道",
    // },
    // {
    //     "id": 444,
    //     "title": "大理古城",
    // },
    // {
    //     "id": 421,
    //     "title": "千户苗寨",
    // },
    // {
    //     "id": 170,
    //     "title": "香格里拉",
    // },
    // {
    //     "id": 219,
    //     "title": "遵义",
    // },
    // {
    //     "id": 222,
    //     "title": "黄果树",
    // },
    // {
    //     "id": 404,
    //     "title": "三峡",
    // },
    // {
    //     "id": 441,
    //     "title": "玉龙雪山",
    // },
    // {
    //     "id": 443,
    //     "title": "泸沽湖",
    // },
  ]
};

// line_items 简化
let getItem = async (ids, limit = 10) => {
  let res = await line_items({
    ids,
    limit,
  });
  return res.data;
};

let getItemArea = async (area, limit = 6) => {
  let res = await line_items({
    area,
    limit,
  });

  return res.data;
};
let getItemDes = async (des, limit = 6) => {
  let res = await line_items({
    des,
    limit,
  });

  return res.data;
};

// 轮播图
let bannerList = ref([]);
bannerList.value = [
  // {
  //   id: 1,
  //   pic: "https://admin.hqx.com.cn/Public/App/image/domestic-banner1.png",
  //   url: "/line/385",
  // },

  {
    id: 2,
    pic: "https://admin.hqx.com.cn/Public/App/image/domestic-banner3.png",
    url: "/line/79",
  },
  {
    id: 3,
    pic: "https://admin.hqx.com.cn/Public/App/image/domestic-banner2.png",
    url: "/line/81",
  },
];

// 品质
let quality = ref([]);
let getQuality = async () => {
  // let data = await getItem("5958,5337,6527,5811,6516,6615,6474", 7);
  let data = await getItem("8063,7976,7797,8064,6446,7980,6474", 7);
  quality.value = data;
};
// 特价
let special = ref([]);
let getSpecial = async () => {
  let data = await getItem("5724,8065,5291,8041,8040,7706", 6);
  special.value = data;
};
// 海滩
let beach = ref([]);
let getBeach = async () => {
  let data = await getItem("7998,6380,8049,7978,8062,7674", 6);
  beach.value = data;
};

// 广东周边
let sideLine = ref([]);
let getSide = async () => {
  let data = await getItem("7954,7791,7757,7382", 4);
  sideLine.value = data;
};

onMounted(async () => {
  await getDestination();
  await getQuality();
  await getSpecial();
  await getBeach();
  await getSide();
});
</script>

<style lang="scss" scoped>
@import "../../css/main_sale_index.css";
</style>
